<!-- 充值 -->
<template>
	<view class="my-index-view">
		<view >
			<text class="color-DFB">充值积分</text>
		</view>
		<view class="flex-jc-ac btn-money mt40" @click="handleIndex(item)" :class="{'active':item.id == pushId}" v-for="item in list" :key='item.id'>
			<text>{{ item.name }}</text>
		</view>
		<view class="mt80">
			<text class="color-DFB">充值方式</text>
		</view>
		<view class="mt40 flex-jc-ac">
			<view class="zf-type"  @click="type = 2"  :class="{'active':type === 2}">
				<view class="img-btn">
					<image :src="type === 2?'/static/icon/zfb.png':'/static/icon/zfb-no.png'" mode="widthFix"></image>
				</view>
				<text>支付宝</text>
			</view>
			<view class="zf-type ml16" @click="type = 1"  :class="{'active':type === 1}">
				<view class="img-btn">
					<image :src="type === 1?'/static/icon/weixin.png':'/static/icon/weixin-no.png'" mode="widthFix"></image>
				</view>
				<text>微信支付</text>
			</view>
		</view>
		<view class="mt100">
			<view class="puts ac" @click="handleMoney">
				 <text>提交</text> 
			</view>
		</view>
		<view class="infos mt40">
			<view>
				 <text>充值说明：</text> 
			</view>
			<view>
				 <text>{{remark}}</text> 
			</view>
		</view>
	</view>
</template>

<script>
	import {apiGetIntegralIndex,apiPostOrderIntegralCreate} from "@/api/me.js"
	import { baseUrl,appName } from '@/config.js'
	export default {
		components: {},
		data() {
			return {
				type:0,
				list:[],
				page:1,
				tempList:[],
				pushId:null,
				remark:"",
				pageSize:15
			}
		},
		onLoad() {
			this.getList()
		},
		filters:{
			price(val){
				return val.split(".")[1] == '00'?val.split(".")[0]:val
			}
		},
		onNavigationBarButtonTap() {  
				 this.$navTo.togo('/pages/me/record?title=cz')
		    }  ,
		methods: {
			getList(bool){
				return new Promise((resfn,rejfn)=>{
					apiGetIntegralIndex({page_size:this.pageSize,page:this.page}).then(res=>{
						if(bool) this.list = []
						this.tempList = res.data.data
						this.list = this.list.concat(res.data.data)
					})
					resfn()
				})
			},
			handleIndex(item){
				this.pushId = item.id
				this.remark = item.remark
			},
			handleMoney(){
				if(!this.pushId) {
				return uni.showToast({
					title:'请选择充值项',
					icon:'none'
				})
				}
				if(!this.type){
					return uni.showToast({
						title:'请选择充值方式',
						icon:'none'
					})
				}
				let data = {
					product_integral_id:this.pushId,
					pay_type:this.type,
					url:baseUrl+'/user/order/integral/create',
					token:uni.getStorageSync('token'),
					success_url:appName
				}
				this.$navTo.togo("/pages/webview/web-view?data="+JSON.stringify(data))
				
				
			}
		},
		onReachBottom(){
			if (this.tempList.length < this.pageSize) {
				return
			}
			this.page++
			this.getList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getList(true).then(res=>{
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			})
		
		}
	}
</script>

<style scoped lang="scss">
.my-index-view{
	padding: 24upx;
	font-size: 32upx;
}
.mt40{
	margin-top: 40upx;
}
.mt80{
	margin-top: 80upx;
}
.ml16{
	margin-left: 16upx;
}
.color-DFB{
	font-weight: 600;
}
.btn-money{
	width:100%;
	height:120upx;
	border-radius:8upx;
	border:1px solid rgba(67,66,84,1);
}
.btn-money.active{
	color: #E62D54;
	border-color: #E62D54;
}
.zf-type{
	width:170.5*2upx;
	line-height:60*2upx;
	border-radius:4*2upx;
	border:1px solid rgba(67,66,84,1);
	display: flex;
	justify-content: center;
	align-items: center;
	
	.img-btn{
		width: 48upx;
		height: 48upx;
		display: flex;
		align-items: center;
		margin-right: 10upx;
	}
	
}
.zf-type.active{
	border-color: #E62D54;
	color: #fff;
}
.mt100{
	margin-top: 100upx;
}
.puts{
	width:100%;
	height:48*2upx;
	line-height:48*2upx;
	margin-top: 60upx;
	border-radius:4*2upx;
	font-size: 28upx;
	background: #E62D54;
	color: #fff;
}
.infos{
	word-wrap:break-word;
	font-size: 28upx;
	padding-bottom: 40upx;
}
</style>
